<template>
  <div class="score-bar-wrap" :style="{ backgroundColor: bgColor }">
    <div
      class="score-bar-content"
      :style="{ width: scale + '%', background: `linear-gradient(to right, ${leftColor}, ${rightColor})` }"
    >
      <div class="score-bar-mask" :style="{ borderColor: `${bgColor} transparent` }"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    scale: {
      type: Number,
      default: 0,
    },
    bgColor: {
      type: String,
      default: '',
    },
    leftColor: {
      type: String,
      default: '',
    },
    rightColor: {
      type: String,
      default: '',
    },
  },
};
</script>

<style lang="less" scoped>
.score-bar-wrap {
  overflow: hidden;
  width: 142px;
  height: 12px;
  border-radius: 6px;
  margin-right: 12px;
  .score-bar-content {
    height: 100%;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    position: relative;
    .score-bar-mask {
      position: absolute;
      right: 0;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 0 13px 6px;
    }
  }
}
</style>
